<template>
  <div style="height: 100%">
    <OptionTitle title="热门课程" />
    <el-form label-width="100" class="mt20">
      <el-form-item label="显示方式" class="mb5">
        <el-radio v-for="item in styleList" :key="item.key" v-model="content.style" :label="item.key" @change="dragSuccess">{{ item.value }}</el-radio>
      </el-form-item>
      <el-form-item label="显示内容：" class="mb5">
        <el-checkbox-group v-model="showContent" @change="dragSuccess">
          <el-checkbox v-for="item in paramList" :key="item.key" :label="item.key">{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item label="显示规则：" class="mb5">
        <el-radio v-for="item in ruleList" :key="item.key" v-model="venueContent.rule" :label="item.key" @change="ruleClick(item.key)">{{ item.value }}</el-radio>
      </el-form-item> -->
    </el-form>
    <!-- <div v-if="venueContent.rule === '2'" class="side">
      <el-button icon="el-icon-plus" @click="openDrawer">添加课程</el-button>
      <Draggable v-model="venueContent.customList" class="list" @end="dragSuccess">
        <div v-for="item,index in venueContent.customList" :key="item.id" class="item">
          <img class="img" :src="item.icon" alt="">
          <div class="title">{{ item.title }}</div>
          <img class="drag" src="@/assets/icon/drag.png" alt="">
          <div class="del_wrap" @click="customItemDel(index)">
            <i color="#FDEBE8" class="el-icon-delete" />
          </div>
        </div>
      </Draggable>
    </div> -->

    <el-drawer
      title="添加课程"
      :visible.sync="isShowDrawer"
      size="50%"
    >
      <div class="drawer_wrap">
        <div>
          <span>课程名称：</span>
          <el-input v-model="searchSlideTitle" class="w200 mr20" placeholder="请输入课程名称：" />
          <span>课程类型：</span>
          <el-select
            v-model="courseType"
            class="w200 mr20"
            placeholder="请选择课程类型"
            clearable
          >
            <el-option value="1" label="线上" />
            <el-option value="2" label="线下" />
          </el-select>
          <el-button type="primary" @click="queryDrawerList">查找</el-button>
          <el-button @click="clearDrawer">清空</el-button>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="tableList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table mt20"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            width="55"
          />
          <el-table-column
            align="center"
            label="场馆名称"
            min-width="140"
            show-overflow-tooltip
          >
            <span>{{ config.venueName }}</span>
          </el-table-column>
          <el-table-column
            align="center"
            label="课程名称"
            prop="courseName"
            min-width="140"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="课程图"
            prop=""
            min-width="100"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <img style="width: 40px;" :src="scope.row.courseImage" alt="">
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="课程类型"
            prop=""
            width="80"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <span v-if="scope.row.flag == '1'">线上</span>
              <span v-if="scope.row.flag == '2'">线下</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="价格"
            prop="price"
            min-width="80"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="报名人数"
            prop="joinNum"
            min-width="80"
            show-overflow-tooltip
          />
        </el-table>
        <Paginations
          :total="tableListTotal"
          :page="pagination.page"
          @current-change="currentChange"
          @SizeChange="handleSizeChange"
        />
        <div class="drawer_bottom">
          <div class="separate" />
          <el-button
            v-preventReClick
            type="primary"
            class="ml20"
            @click="customSub"
          >提交</el-button>
          <el-button @click="isShowDrawer = false">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import OptionTitle from '../../../components/optionTitle.vue'
import { getHotCourseList } from '@/api'
export default {
  components: {
    OptionTitle,
    Draggable
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      paramList: [],
      ruleList: [],
      styleList: [],
      content: {},
      venueContent: {},

      showContent: [], // 显示内容 暂存

      isShowDrawer: false,
      searchSlideTitle: '',
      courseType: '',
      tableList: [],
      tableListTotal: 0,
      selTableList: [],
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,
      contentTemp: {},
      venueContentTemp: {},
      showContentTemp: []
    }
  },
  created() {
    this.paramList = [...this.config.paramList]
    this.ruleList = [...this.config.ruleList]
    this.styleList = [...this.config.styleList]
    this.content = { ...this.config.content }
    this.venueContent = { ...this.config.venueContent }
    if (this.content.param) {
      this.showContent = this.content.param.split(',')
    }
    this.contentTemp = JSON.parse(JSON.stringify(this.config.content))
    this.venueContentTemp = JSON.parse(JSON.stringify(this.config.venueContent))
    if (this.content.param) {
      this.showContentTemp = JSON.parse(JSON.stringify(this.content.param.split(',')))
    }
  },
  methods: {
    dragSuccess() {
      const { content, contentTemp, showContent, showContentTemp, venueContent, venueContentTemp } = this
      this.content.param = this.showContent.join(',')
      const obj = {
        venueContent: {
          customList: this.venueContent.customList
        },
        name: this.config.name,
        content: this.content
      }
      let count = 0
      if (showContent.join(',') !== showContentTemp.join(',')) {
        count++
      }
      if (content.style !== contentTemp.style) {
        count++
      }
      if (venueContent.rule !== venueContentTemp.rule) {
        count++
      }
      if (venueContent.customList && venueContentTemp.customList && venueContent.customList.map(i => i.id).join(',') !== venueContentTemp.customList.map(i => i.id).join(',')) {
        count++
      }
      this.$bus.$emit('miniHotCourseChange', this.venueContent.rule, obj)
    },
    handleSelectionChange(val) {
      this.selTableList = val
    },
    indexSub() {
      const fn = () => {
        if (this.venueContent.rule === '1') {
          this.venueContent.customList = null
        }
      }
      fn()
    },
    ruleClick(val) {
      this.dragSuccess()
    },
    openDrawer() {
      this.searchSlideTitle = ''
      this.isShowDrawer = true
      this.getHotCourse()
      this.$nextTick(() => {
        this.$refs.table.clearSelection()
      })
    },
    getHotCourse() {
      this.listLoading = true
      getHotCourseList({
        param: {
          isRec: '1',
          channel: '01',
          venueId: this.config.venueId,
          name: this.searchSlideTitle,
          flag: this.courseType
        }
      }).then(res => {
        this.listLoading = false
        this.tableList = res.recordList
        this.tableListTotal = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    customSub() {
      const temp = this.venueContent.customList || []
      const customList = this.selTableList.map(item => {
        item.icon = item.courseImage
        item.title = item.courseName || ''
        item.id = item.courseId || ''
        return item
      })
      customList.forEach(item => {
        if (temp.findIndex(i => i.id === item.id) > -1) {
          return
        } else {
          temp.push(item)
        }
      })
      if (temp.length > this.config.maxNum) {
        return this.$message.warning(`最多添加${this.config.maxNum}个课程`)
      }
      this.venueContent.customList = temp
      this.dragSuccess()
      this.isShowDrawer = false
    },
    customItemDel(index) {
      const temp = [...this.venueContent.customList]
      temp.splice(index, 1)
      this.venueContent.customList = temp
      this.dragSuccess()
    },
    clearDrawer() {
      this.searchSlideTitle = ''
      this.courseType = ''
      this.pagination.page = 1
      this.getHotCourse()
    },
    queryDrawerList() {
      this.pagination.page = 1
      this.getHotCourse()
    },
    currentChange(val) {
      this.pagination.page = val
      this.getHotCourse()
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getHotCourse()
    }
  }
}
</script>

<style lang="scss" scoped>
.side{
  height: calc(100% - 200px);
  overflow: auto;
  .list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .item{
      margin-right: 20px;
      margin-bottom: 20px;
      width: 184px;
      /* height: 138px; */
      position: relative;
      border: 1px solid #DFE2E8;
      padding: 10px;
      cursor: pointer;
      .img{
        width: 164px;
        height: 96px;
      }
      .title{
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
      }
      &:hover{
        .del_wrap{
          display: block;
        }
      }
      .del_wrap{
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius:  0 0 0 4px;
        text-align: center;
        background-color: #FDEBE8;
        color: #EE3821;
        font-size: 12px;
        cursor: pointer;
      }
      .drag{
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
.drawer_wrap{
  height: calc(100% - 100px);
  overflow: auto;
}
.drawer_bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  padding-bottom: 20px;
  background-color: #fff;
  z-index: 1000;
  .separate {
    width: 100%;
    height: 1px;
    margin: 20px 0px;
    background-color: #dfe2e8;
  }
}
</style>
